<template>
  <div class="admin-page-content">
    <div class="has-top-from-bottom">
      <div class="btn-box">
        <el-button type="primary" size="small" @click.native="$router.go(-1)" icon="el-icon-arrow-left">返回</el-button>
      </div>
    </div>
    <el-table ref="multipleTable" size="small" :border="true" tooltip-effect="dark" 
      style="width: 100%;margin-top:30px;" :data="data" v-loading="loading">
       <el-table-column label="用户名" prop="username"></el-table-column>
       <el-table-column label="姓名" prop="realname"></el-table-column>
       <el-table-column label="调用环境" prop="accessEnv">
         <template slot-scope="scope">
           <el-tag type="success" size="mini" v-if="scope.row.accessEnv === 0">生产环境</el-tag>
            <el-tag type="warning" size="mini" v-if="scope.row.accessEnv === 1">调试环境</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="使用时间" prop="createTime">
         <template slot-scope="scope">{{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</template>
       </el-table-column>
      <el-table-column label="响应时间" prop="usedTime">
        <!-- <template slot-scope="scope"> {{scope.row.usedTime}} ms</template>     -->
      </el-table-column>
      <el-table-column label="响应大小" prop="respSize">
        <!-- <template slot-scope="scope"> {{scope.row.respSize}} kb</template>     -->
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.pageNumber"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="query.pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
      <span class="span-pagination">共{{ Math.ceil(total/query.pageSize) }}页，{{total}}条数据</span>
    </div>
  </div>
</template>
<script>
import { queryServiceInfo } from '@/api/admin/service_census';
import moment from 'moment';
export default {
  data() {
    return {
      data: [],
      total: 0,
      loading: true,
      query: {
        pageNumber:1,
        pageSize:10,
      }
    }
  },
  mounted() {
    this.getServiceCountList()
  },
  methods: {
    moment,
    handleCurrentChange(val) {
      this.query.pageNumber = val;
      this.getServiceCountList()
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getServiceCountList()
    },
    async getServiceCountList() {
      const vm = this;
      vm.loading = true;
      vm.query.appId = vm.$route.query.id
      let reponse = await queryServiceInfo(vm.query)
      vm.loading = false;
      if (reponse.code === '20000') {
        vm.data = reponse.data.list;
        vm.total = reponse.data.total
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  padding-bottom: 20px;
}
</style>